<template>
    <div>
        <Header :left="true" leftText="返回" title="调机扣货备忘录" />
        <div>
            <div style="height: 15erm">
                <Form :style="autoHeight">
                    <van-field label="生产日期" class="formstyle" placeholder="请选择生产日期" is-link :value="form.ProductionDate"
                        @click="showdate = true" />
                    <van-calendar color="#1989fa" v-model="showdate" @confirm="onConfirm" :min-date="minDate" />
                    <van-field class="formstyle" v-model="form.pOrderID" name="订单号" label="订单号" placeholder="输入订单号" />
                    <van-field class="formstyle" v-model="form.MaterialName" name="产品名称" label="产品名称"
                        placeholder="输入产品名称" />
                    <van-field class="formstyle" v-model="form.PlineID" readonly name="生产线"
                        @click="showPickerpMachineEquipmentID = true" label="生产线" placeholder="输入生产线" />
                    <!-- <van-field readonly class="formstyle" v-model="form.ResourceFrom" name="调机来源" label="调机来源"
                        :value="LAB" /> -->
                    <van-popup v-model="showPickerpMachineEquipmentID" position="bottom">
                        <van-picker show-toolbar :columns="searchColumns" @confirm="onConfirmpMachineEquipmentID"
                            @cancel="showPickerpMachineEquipmentID = false">
                            <template #option="option">
                                <div style="display: flex; flex-direction: column; align-items: center">
                                    <div>{{ option.pMachineID }}</div>
                                </div>
                            </template>
                            <template #title>
                                <van-field v-model="searchKey" placeholder="请输入搜索内容" clearable />
                            </template>
                        </van-picker>
                    </van-popup>
                </Form>
                <div>
                    <van-button type="primary" class="buttongroup" @click="getList" color="#138087">查询</van-button>
                </div>
            </div>

            <van-tabs v-model="active" type="card" :offset-top="80" :sticky="true" @click="tabChange" swipeable
                style="top: 8px; font-size: 15px" color="#1c6c8d">
                <!-- 未处置页面 -->
                <van-tab title="未处置" style="font-size: 15px">
                    <van-row style="margin-top: 20px">
                        <van-col>
                            <van-image width="40" height="30" style="margin-left: -10px" src="assets/block.png" />
                        </van-col>
                        <van-col class="message">未处置记录</van-col>
                    </van-row>
                    <div class="textScroll">
                        <!-- 循环数据开始 -->
                        <div v-for="item in itemsOne" :key="item.Id" style="position: relative">
                            <div style="width: 100%; background-color: #f3f4f8; height: 5px">
                                <span></span>
                            </div>
                            <div class="divStyle">
                                <van-row v-show="false" style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="4"><b>生产线:</b></van-col>
                                    <van-col span="14">{{ item.Id }}</van-col>
                                </van-row>
                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="4"><b>设备代码:</b></van-col>
                                    <van-col span="14">{{ item.MachineID }}</van-col>
                                </van-row>
                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="4"><b>订单号:</b></van-col>
                                    <van-col span="14">{{ item.POrderID }}</van-col>
                                </van-row>
                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="4"><b>产品名称:</b></van-col>
                                    <van-col span="14">{{ item.MaterialName }}</van-col>
                                </van-row>
                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="4"><b>调机来源:</b></van-col>
                                    <van-col span="14">{{ item.ResourceFrom }}</van-col>
                                </van-row>
                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="4"><b>问题批次:</b></van-col>
                                    <van-col span="14">{{ item.ProductionBatch }}</van-col>
                                    <van-col span="2">
                                        <van-button
                                            style="width: 85px;height: 40px;font-size: 12px;position: absolute;left: 80%;"
                                            type="primary" text="详情"
                                            to="src/pages/equipmentsj/QCWithholdgoodsMemorandumItem"
                                            @click.stop="seeCheckedDetail(item)" />
                                    </van-col>
                                </van-row>
                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="4"><b>调机原因:</b></van-col>
                                    <van-col span="14">{{ item.QProblemID }}{{ item.ManageReasonID }}{{
                                        item.FunctionProblemID }}</van-col>
                                </van-row>

                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="4"><b>发起人:</b></van-col>
                                    <van-col span="14">{{ item.Creator }}</van-col>
                                </van-row>

                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="4"><b>发起时间:</b></van-col>
                                    <van-col span="14">{{ item.CreateDatetime }}</van-col>
                                </van-row>
                            </div>
                            <div>
                                <br />
                            </div>
                        </div>
                        <div>
                            <br />
                        </div>
                    </div>
                </van-tab>

                <!-- 已处置页面 -->
                <van-tab title="已处置" style="font-size: 15px">
                    <van-row style="margin-top: 20px">
                        <van-col>
                            <van-image width="40" height="30" style="margin-left: -10px" src="assets/block.png" />
                        </van-col>
                        <van-col class="message">已处置记录</van-col>
                    </van-row>
                    <div class="textScroll">
                        <!-- 循环数据开始 -->
                        <div v-for="item in itemsTwo" :key="item.Id" style="position: relative">
                            <div style="width: 100%; background-color: #f3f4f8; height: 5px">
                                <span></span>
                            </div>
                            <div class="divStyle">
                                <van-row v-show="false" style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="4"><b>生产线:</b></van-col>
                                    <van-col span="14">{{ item.Id }}</van-col>
                                </van-row>
                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="4"><b>设备代码:</b></van-col>
                                    <van-col span="20">{{ item.MachineID }}</van-col>
                                </van-row>
                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="4"><b>订单号:</b></van-col>
                                    <van-col span="20">{{ item.POrderID }}</van-col>
                                </van-row>
                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="4"><b>产品名称:</b></van-col>
                                    <van-col span="20">{{ item.MaterialName }}</van-col>
                                </van-row>
                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="4"><b>调机来源:</b></van-col>
                                    <van-col span="14">{{ item.ResourceFrom }}</van-col>
                                </van-row>
                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="4"><b>问题批次:</b></van-col>
                                    <van-col span="18">{{ item.ProductionBatch }}</van-col>
                                    <van-col span="2">
                                        <van-button
                                            style="width: 85px;height: 40px;font-size: 12px;position: absolute;left: 80%;"
                                            type="primary" text="详情" @click.stop="seeCheckedDetail(item)" />
                                    </van-col>
                                </van-row>
                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="4"><b>调机原因:</b></van-col>
                                    <van-col span="14">{{ item.QProblemID }}{{ item.ManageReasonID }}{{
                                        item.FunctionProblemID }}</van-col>
                                </van-row>

                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="4"><b>发起人:</b></van-col>
                                    <van-col span="14">{{ item.Creator }}</van-col>
                                </van-row>

                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="4"><b>发起时间:</b></van-col>
                                    <van-col span="20">{{ item.CreateDatetime }}</van-col>
                                </van-row>

                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="6"><b>最终处理意见:</b></van-col>
                                    <van-col span="18" style="color: green"><strong>{{
                                        showDealType(item.FixedAgree)
                                    }}</strong></van-col>
                                </van-row>
                            </div>
                        </div>
                        <div>
                            <br />
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>
  
<script>
import {
    Col,
    Row,
    Form,
    Cell,
    Icon,
    Field,
    NumberKeyboard,
    Image as VanImage,
    Picker,
    popup,
    SubmitBar,
    Button,
    Loading,
    Overlay,
    Dialog,
    tab,
    tabs,
    Toast,
    NoticeBar,
    Tag,
    DatetimePicker,
    ImagePreview,
    CellGroup,
    Uploader,
    Cascader,
    Calendar,
    RadioGroup,
    Radio,
    Divider,
    Stepper,
    AddressList,
    Checkbox,
    CheckboxGroup,
} from "vant";

import "vue-easytable/libs/themes-base/index.css";
import { VTable } from "vue-easytable";
import { _httpClient as _httpClientApi } from "@/libs/api";
import { _httpClient } from "@/libs/apisie";
import { getToken, getBaseApiFrefix } from "@/libs/auth";
import Header from "@/components/header.vue";
import { storage } from "@/libs/utils";

Vue.use(Form);
Vue.use(Field);
Vue.use(Overlay);
Vue.use(Loading);
Vue.use(tabs);
Vue.use(Picker);
Vue.use(popup);
Vue.use(SubmitBar);
Vue.use(VanImage);
Vue.use(DatetimePicker);
Vue.use(Cascader);
Vue.use(Calendar);
Vue.use(Cell);
Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(Divider);
Vue.use(Stepper);
Vue.use(Button);
Vue.use(AddressList);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Col);
Vue.use(Row);
Vue.use(tab);

export default {
    name: "QCWithholdgoodsMemorandum",
    components: {
        tab,
        Form,
        Row,
        Col,
        Button,
        Header,
        Form,
        Cell,
        Icon,
        Field,
        NumberKeyboard,
        Dialog,
        Toast,
        NoticeBar,
        Row,
        Tag,
        popup,
        DatetimePicker,
        ImagePreview,
        CellGroup,
        Uploader,
        Col,
        Calendar,
        Cascader,
        Picker,
        RadioGroup,
        Radio,
        Divider,
        Stepper,
        VTable,
        AddressList,
        Checkbox,
        CheckboxGroup,
    },

    data() {
        return {
            searchColumns: [],
            searchKey: "",
            showPickerpMachineEquipmentID: false,
            columnsMachineEquipment: [],
            columnsDealType: [],
            minDate: new Date(2023, 0, 1),
            showdate: false,
            nowDate: "",
            item: {},
            itemsOne: [],
            itemsTwo: [],
            columnsshift: [],
            form: {
                ProductionDate: "",
                pOrderID: "",
                MaterialName: "",
                PlineID: "",
                ResourceFrom: ""
            },
        };
    },

    created: function () {
        let oldHight = api.winWidth;
        this.screenWidth = oldHight;
        this.getUncheckedList();
        this.getCheckedList();
        this.getDealType();
        this.getMachineEquipment();
        this.nowDate = this.getNowTime();
        //this.getUsername(item.Creator)
    },
    async mounted() { },
    watch: {  //实时监听搜索输入内容
        'searchKey': {
            handler(newVal) {
                let key = String(newVal);
                //alert(key);
                key = key.replace(/\s*/g, "");
                const reg = new RegExp(key, "ig");
                /* 进行筛选，将筛选后的数据放入新的数组中，‘name’键可根据需要搜索的key进行调整 */
                this.searchColumns = this.columnsMachineEquipment.filter(item => item.pMachineID.match(reg) != null);
                //alert(this.searchColumns);
            },
            deep: true,
            immediate: true,
        }
    },
    methods: {
        // async getUsername(id) {
        //     try {
        //         alert(id)
        //         let res4 = await _httpClient.get(
        //             _httpClient.getApiPrefix() + "/Employee/GetList?EmployeeID=" + id)
        //         if (res4.Data.length > 0) {
        //             this.itemsOne.forEach((item) => {
        //                 item.Creator = "暂无";
        //             });
        //             // this.item.Creator = res4.Data[0].EmployeeName
        //             return
        //         }
        //     } catch (e) {
        //         alert(JSOn.stringify(e))
        //     }
        //     this.item.Creator = id
        // },
        getNowTime() {
            let dateTime;
            let yy = new Date().getFullYear();
            let mm = new Date().getMonth() + 1;
            let dd = new Date().getDate();
            let hh = new Date().getHours();
            let mf =
                new Date().getMinutes() < 10
                    ? "0" + new Date().getMinutes()
                    : new Date().getMinutes();
            let ss =
                new Date().getSeconds() < 10
                    ? "0" + new Date().getSeconds()
                    : new Date().getSeconds();
            dateTime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
            return dateTime;
        },
        getBeforeDayTime() {
            let dateTime;
            let yy = new Date().getFullYear();
            let mm = new Date().getMonth() + 1;
            let dd = new Date().getDate() - 1;
            let hh = new Date().getHours();
            let mf =
                new Date().getMinutes() < 10
                    ? "0" + new Date().getMinutes()
                    : new Date().getMinutes();
            let ss =
                new Date().getSeconds() < 10
                    ? "0" + new Date().getSeconds()
                    : new Date().getSeconds();
            dateTime = yy + "-" + mm + "-" + dd + " " + "20" + ":" + "30" + ":" + "00";
            return dateTime;
        },
        getAfterDayTime() {
            let dateTime;
            let yy = new Date().getFullYear();
            let mm = new Date().getMonth() + 1;
            let dd = new Date().getDate() + 1;
            let hh = new Date().getHours();
            let mf =
                new Date().getMinutes() < 10
                    ? "0" + new Date().getMinutes()
                    : new Date().getMinutes();
            let ss =
                new Date().getSeconds() < 10
                    ? "0" + new Date().getSeconds()
                    : new Date().getSeconds();
            dateTime = yy + "-" + mm + "-" + dd + " " + "08" + ":" + "30" + ":" + "00";
            return dateTime;
        },
        getDayShiftFromTime() {
            let dateTime;
            let yy = new Date().getFullYear();
            let mm = new Date().getMonth() + 1;
            let dd = new Date().getDate();
            let hh = new Date().getHours();
            let mf =
                new Date().getMinutes() < 10
                    ? "0" + new Date().getMinutes()
                    : new Date().getMinutes();
            let ss =
                new Date().getSeconds() < 10
                    ? "0" + new Date().getSeconds()
                    : new Date().getSeconds();
            dateTime = yy + "-" + mm + "-" + dd + " " + "08" + ":" + "30" + ":" + "00";
            return dateTime;
        },
        getDayShiftToTime() {
            let dateTime;
            let yy = new Date().getFullYear();
            let mm = new Date().getMonth() + 1;
            let dd = new Date().getDate();
            let hh = new Date().getHours();
            let mf =
                new Date().getMinutes() < 10
                    ? "0" + new Date().getMinutes()
                    : new Date().getMinutes();
            let ss =
                new Date().getSeconds() < 10
                    ? "0" + new Date().getSeconds()
                    : new Date().getSeconds();
            dateTime = yy + "-" + mm + "-" + dd + " " + "20" + ":" + "30" + ":" + "00";
            return dateTime;
        },
        uniqueJSON(arr, attrName) {
            let obj = {};
            let result = arr.reduce((previousValue, currentValue) => {
                (obj[currentValue[attrName]] ? "" : (obj[currentValue[attrName]] = true)) && previousValue.push(currentValue);
                return previousValue;
            }, []);
            return result;
        },
        seeCheckedDetail(val) {
            let _this = this;
            _this.$ac.openWin({
                name: "equipmentsj-QCWithholdgoodsMemorandumItem",
                url: "./equipmentsj-QCWithholdgoodsMemorandumItem.html",
                pageParam: {
                    item: val
                }
            });
        },
        async getMachineEquipment() {
            let _this = this;
            try {
                let res = await _httpClient.get(
                    _httpClient.getApiPrefix() + "/MachineEquipment/GetList"
                );
                if (res.HttpCode === "200") {
                    let machineEquipmenttMap = res.Data.map((item) => ({
                        pMachineID: item.PlineID
                    }));
                    //alert(JSON.stringify(machineEquipmenttMap));
                    machineEquipmenttMap = _this.uniqueJSON(machineEquipmenttMap, "pMachineID");
                    //alert(JSON.stringify(machineEquipmenttMap));
                    _this.columnsMachineEquipment = machineEquipmenttMap;
                    _this.searchColumns = machineEquipmenttMap;
                    // machineEquipmenttMap.forEach(element => {
                    //   if (element.pMachineID == _this.item.valueplineid) {
                    //     this.valuepMachineEquipment = element.PlineID;
                    //     this.form.MachineID = element.PlineID;
                    //   }
                    // });
                }
            } catch (e) {
                //Toast.fail(JSON.stringify(e));
            }
        },
        onConfirmpMachineEquipmentID(value, index) {
            this.valuepMachineEquipment =
                this.searchColumns[index].pMachineName;
            this.form.PlineID = this.searchColumns[index].pMachineID;
            this.showPickerpMachineEquipmentID = false;
        },
        jjj() {
            // this.columnsshift.forEach(item => {
            //     EmployeeName = item.EmployeeName
            // })
            // alert(EmployeeName)
            return 111;
        },
        async zidingyi() {
            // if(id=="18173026206"){
            //     return "同意调机";
            // }
            alert("23"+this.user.Creator);
            let res = await _httpClient.get(
                _httpClient.getApiPrefix() + "/Employee/GetList?EmployeeID=" + id);
            // if (res.Data.length > 0) {
            //     this.item.Creator = res.Data[0].EmployeeName
            // }
            // alert(res.Data[0].EmployeeName);
            // // this.item.Creator = res4.Data[0].EmployeeName
            // if (id == "18173026206") {
            //     return "同意调机123";
            // }
            let shiftMap = res.Data.map(item => ({ EmployeeName: item.EmployeeName }))
            _this.columnsshift = shiftMap
            //return res.Data[0].EmployeeName;
        },
        showDealType(type) {
            if (type == "1") {
                return "同意调机";
            } else {
                return "不同意调机";
            }
            // var DealTypeName;
            // this.columnsDealType.forEach((item) => {
            //     if (item.DealTypeID === type) {
            //         DealTypeName = item.DealTypeName;
            //     }
            // });
            // return DealTypeName;
        },
        async getDealType() {
            let _this = this;
            try {
                let res = await _httpClient.get(
                    _httpClient.getApiPrefix() + "/QualityDealType/GetList"
                );
                if (res.HttpCode === "200") {
                    let temp = res.Data.map((item) => ({
                        DealTypeID: item.DealTypeID,
                        DealTypeName: item.DealTypeName,
                    }));
                    temp.forEach((item) => {
                        _this.columnsDealType.push(item);
                    });
                }
            } catch (e) {
                //Toast.fail(JSON.stringify(e));
            }
        },
        getList() {
            this.getUncheckedList();
            this.getCheckedList();
        },

        tabChange(name, title) {
            if (name == 0) {
                //查询未确认信息
                this.getUncheckedList();
            } else if (name == 1) {
                //查询已确认信息
                this.getCheckedList();
            }
        },
        //查询未确审核调机数据
        async getUncheckedList() {

            if (this.getNowTime() < this.getDayShiftToTime() && this.getNowTime() > this.getDayShiftFromTime()) {
                //alert('在白班范围内:'+this.getNowTime()+"————"+this.getBeforeDayTime()+"————"+this.getDayShiftToTime());
                this.form.CreateDatetimeFrom = this.getBeforeDayTime();
                this.form.CreateDatetimeTo = this.getDayShiftToTime();
            } else {
                //alert('在夜班范围内:'+this.getNowTime()+"————"+this.getDayShiftFromTime()+"————"+this.getAfterDayTime());
                this.form.CreateDatetimeFrom = this.getDayShiftFromTime();
                this.form.CreateDatetimeTo = this.getAfterDayTime();
            }

            let _this = this;
            Toast.loading({
                mask: true,
                forbidClick: true,
                duration: 0,
                message: "Loading...",
            });
            try {
                let res = await _httpClient.get(
                    _httpClient.getApiPrefix() +
                    "/QualityAbnormalNotice/GetList?DetainChecked=false&ResourceFrom=LAB&POrderID=" +
                    this.form.pOrderID +
                    "&MaterialName=" +
                    this.form.MaterialName +
                    "&ResourceFrom=" +
                    this.form.ResourceFrom +
                    "&MachineID=" +
                    this.form.PlineID +
                    "&CreateDatetimeFrom=" +
                    this.form.CreateDatetimeFrom +
                    "&CreateDatetimeTo=" +
                    this.form.CreateDatetimeTo +
                    "&ProductionDate=" +
                    this.form.ProductionDate.replace("/", "-")
                );
                Toast.clear();
                _this.itemsOne = res.Data;
                _this.itemsOne.forEach((item) => {
                    item.FixedDealType = "暂无";
                });
                //}
            } catch (e) {
                //Toast.fail(JSON.stringify(e));
            }
        },
        onConfirm(date) {
            this.showdate = false;
            this.form.ProductionDate = this.formatDate(date);
        },
        formatDate(date) {
            return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
        },
        //查询已确审核调机数据
        async getCheckedList() {

            if (this.getNowTime() < this.getDayShiftToTime() && this.getNowTime() > this.getDayShiftFromTime()) {
                //alert('在白班范围内:'+this.getNowTime()+"————"+this.getBeforeDayTime()+"————"+this.getDayShiftToTime());
                this.form.CreateDatetimeFrom = this.getBeforeDayTime();
                this.form.CreateDatetimeTo = this.getDayShiftToTime();
            } else {
                //alert('在夜班范围内:'+this.getNowTime()+"————"+this.getDayShiftFromTime()+"————"+this.getAfterDayTime());
                this.form.CreateDatetimeFrom = this.getDayShiftFromTime();
                this.form.CreateDatetimeTo = this.getAfterDayTime();
            }

            let _this = this;
            Toast.loading({
                mask: true,
                forbidClick: true,
                duration: 0,
                message: "Loading...",
            });
            try {
                let res = await _httpClient.get(
                    _httpClient.getApiPrefix() +
                    "/QualityAbnormalNotice/GetList?DetainChecked=true&ResourceFrom=LAB&POrderID=" +
                    this.form.pOrderID +
                    "&MaterialName=" +
                    this.form.MaterialName +
                    "&ResourceFrom=" +
                    this.form.ResourceFrom +
                    "&MachineID=" +
                    this.form.PlineID +
                    "&CreateDatetimeFrom=" +
                    this.form.CreateDatetimeFrom +
                    "&CreateDatetimeTo=" +
                    this.form.CreateDatetimeTo +
                    "&ProductionDate=" +
                    this.form.ProductionDate
                );
                // if (res.Total == 0) {
                //   Toast.clear();
                // } else {
                Toast.clear();
                _this.itemsTwo = res.Data;
                //}
            } catch (e) {
                //Toast.fail(JSON.stringify(e));
            }
        },

    },
};
</script>
  
<style>
body {
    background-color: white;
}

.table-title-class {
    background-color: #304156;
    color: #fff;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.buttongroup {
    float: right;
    width: 30%;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.container.dwo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.buttonLeft {
    position: fixed;
    bottom: 8px;
    float: left;
    width: 49%;
}

.formstyle {
    font-size: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.radioteam {
    display: flex;
    align-items: center;
    padding-left: 13px;
    margin-top: 10px;
    margin-left: 34px;
    margin-bottom: 10px;
}

.buttonRight {
    position: fixed;
    bottom: 8px;
    float: right;
    left: 51%;
    width: 49%;
    background-color: #f22028;
    border-color: #f22028;
}

.textScroll {
    display: inline-block;
    position: fixed;
    top: 42%;
    bottom: 3rem;
    overflow: scroll;
    right: 10px;
    width: 100%;
    z-index: 1;
}

.message {
    font-size: 15px;
    margin-top: 5px;
    margin-left: -10px;
    font-weight: bold;
}

.mg5 {
    margin-right: 5px;
}

.tag_margin {
    margin: 2px 5px;
}

.card_under {
    height: 100%;
    width: 100%;
    margin: auto;
    background: #ffffff;
    border-radius: 25px;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
}

.card_icon {
    text-align: center;
    /* position: absolute; */
    height: 8rem;
    width: 80%;
    margin: 12% 10%;
    background: rgba(35, 180, 237, 1);
    border-radius: 25px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}

.text {
    font-size: 18px;
    color: #4e4a67;
    margin: 8px auto auto 20px;
    line-height: 1.5rem;
    text-align: justify;
    font-weight: 600;
}

.text_small {
    font-size: 16px;
    color: red;
    margin: 8px auto auto 20px;
    line-height: 1.5rem;
    text-align: justify;
    font-weight: 700;
}

.text_scan {
    font-size: 16px;
    color: #4e4a67;
    margin: auto auto auto 20px;
    line-height: 1.5em;
    text-align: justify;
}

.divStyle {
    margin-left: 3px;
    margin-right: 3px;
}
</style>
  